import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import turnplate from "@/common/turnplate";
import layer from "@/common/layer";
import { relative } from 'path';
import jquery from 'jquery';


class Turnplate extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tipList: []
        }
    }

    async  getTipList() {
        let res = await util.rjax({
            url: '/prizeUser/list',
            type: 'get',
        }).catch((res) => {
            this.setState({ tipList: res.data.rows });
        })

        if (res) {
            var list = new Array()
            for (let item of res.data.rows) {
                if (item.phone) {
                    list.push(item)
                }
            }
            this.setState({ tipList: list });
        }
    }

    async sendcode() {
        var wechatcode = util.getQuery().code;
        let res = await util.rjax({
            url: '/wxAuthenticate/getOpenId?code=' + wechatcode,
            type: 'post',
        }).catch((res) => {
            console.log("catch:" + res)
        })

        if (res) {
            console.log("if(res):" + res)
            sessionStorage.setItem("openid", res.openId)
        }

    }

    async pointer() {
        turnplate.gamestate(3, 100000, 100100)
        /*接收3个参数，第一个参数表示周几，第二个参数表示开始时间，第三个参数表示结束时间*/
    }

    componentDidMount() {
        if (util.getQuery().code) {
            var openid = sessionStorage.getItem("openid")
            if (!openid || openid === 'null') {
                this.sendcode()
            }
        }
        else {
            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxeaccffdd3826280c&redirect_uri=http%3a%2f%2fwww.rongsue.com%2fwechat%2fturnplate.html&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect`
        }
        turnplate.drawRouletteWheel()
        this.getTipList()
        setInterval(this.noticeUp, 2000)
    }

    noticeUp() {
        jquery(".noticeul").animate({
            marginTop: '-26px'
        }, 2000, function () {
            jquery(this).css({ marginTop: "0" }).find(":first").appendTo(this);
        })
    }

    render() {
        let tips = this.state.tipList.map((item, index) => {
            return (
                <li key={index}>
                    <span>{item.phone ? item.phone.substr(0, 3) + "****" + item.phone.substr(7) : ''}</span>
                    <span>{item.createTime ? item.createTime.substr(11, 5) : ''}</span>
                    <span>抽中{item.prizeName}</span>
                </li>
            )
        })
        return (
            <div>
                <div id="turntable">
                    <div style={{ position: "relative", height: "220px" }}>
                        <span className="imgbox"><img className="imgtitle" src="/assets/wechat/turntb_title.png" alt="" /></span>
                        <img className="imgink1" src="/assets/wechat/turntb_ink2.png" alt="" />
                        <img className="imgink2" src="/assets/wechat/turntb_ink1.png" alt="" />
                        <a href="./prizerecord.html" className="arrowbox">
                            <img className="imgarrow" src="/assets/wechat/turntb_arrow.png" alt="" />
                            <span className="winrecord">查看中奖记录</span>
                        </a>
                    </div>

                    <div className="tips">
                        <div className="notice">
                            <ul className="noticeul">
                                {tips}
                            </ul>
                        </div>
                    </div>

                    <div className="plate">
                        <div className="banner">
                            <div className="turnplate" style={{ backgroundImage: "url(/assets/wechat/turnplate-bg.png)", backgroundSize: "100% 100%" }}>
                                <canvas className="item" id="wheelcanvas" width="422px" height="422px"></canvas>
                                <img className="pointer" src="/assets/wechat/guide.png" onClick={this.pointer.bind(this)} />
                            </div>
                        </div>
                    </div>

                    <div className="rule mb">
                        <span className="rulebox"><img src="/assets/wechat/turntb_tit1.png" alt="" /></span>
                        <p className="text">活动时间：2018年8月29日-9月12日 （<i>每周三</i> <i>&lt;十点&gt; </i>整点可抽取，每日30个奖励包，先到先得）</p>
                        <p className="text">活动规则：每个微信号<i>每周三</i><i>&lt;十点&gt;</i>可抽一次，每个微信号可获得一次奖励。</p>
                    </div>

                    <div className="rule">
                        <span className="rulebox"><img src="/assets/wechat/turntb_tit2.png" alt="" /></span>
                        <p className="text">独占鳌头奖：ipad pro一台</p>
                        <p className="text">快人一步奖：小米手环一枚</p>
                        <p className="text">天天向上奖：kindle经典版一台</p>
                        <p className="text">贴心参与奖：驱蚊手环、充值流量卡、手机费</p>
                    </div>

                    <div className="bottom">
                        <div className="bottext">
                            <p>奖品发放时间：活动截止后1-3个工作日</p>
                            {/* <p>虚拟物品发放时间：2018.8.20-8.21</p>
                            <p>实体物品发放时间：2018.8.20-8.22统一寄出</p> */}
                        </div>
                        <p className="explain">本次活动最终解释权归苏e栈所有</p>
                    </div>
                </div>
            </div >
        )
    }
}
ReactDom.render(<Turnplate />, document.getElementById("app"));